<template>
	<view class="mesInf">
		<!-- 		<view class="itMap">
			<view class="clMap">
				<u-icon name="map" color='darkred' size='30'></u-icon>
				<span>{{clanAddress}}</span>

			</view>
		
		</view> -->
		<view class="itMap">
			<view class="clanMsgTxt">
				{{ useClan.clanMsg.name}}
				<span style="font-size: 30rpx;">
					{{useClan.clanMsg.describe}}
				</span>
			</view>
			<span style="position: absolute;"> {{useClan.clanMsg.place}}</span>
		</view>



		<view v-if="itrList==''" style="margin-top: 70rpx;">
			该家族暂未编写简介
		</view>
		<view v-else class="itItr">

			<view class="itInf" v-for="item in itrList" :key="item.id">
				<view class="titleItr">
					—— {{item.title}} ——
					<view class="btnReadContent" @click="readContent(item.content)">
						<uni-icons type="sound" color="darkred" size="40" v-if="unReading"></uni-icons>
						<uni-icons type="sound-filled" color="darkred" size="40" v-else></uni-icons>
					</view>
				</view>

				<view class="contentItr">
					<rich-text :nodes="formatContent(item.content)"></rich-text>
				</view>

				<!-- <audio v-if="audioWx" :src="audioWx" style="height: 10rpx;width: 10rpx;" :controls="false"></audio> -->

			</view>
		</view>

		<view class="btnBind" @click="bindClan()" v-if="useUser.userProfile.treeId!=useClan.clanId">
			绑定家族
		</view>
		<view class="btnBind" @click="cancelBindClan()" v-else>
			解除绑定
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue';
	import clan from '@/apis/clan.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useClanStore
	} from '@/store/index.js'
	const useClan = useClanStore()
	const clanAddress = ref('')
	const clanMsg = ref()
	// 正则表达式空格替换
	// res.data = res.data.replace(/&nbsp;/g, '\xa0');
	// res.data = res.data.replace(/ /g, '\xa0');

	const itrList = ref([]);
	itrList.value = useClan.clanItr;
	const treeId = ref();


	// 语音播报
	const audioWx = ref()
	const unReading = ref(true)
	const getSimpleText = (html) => {
		var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
		var msg = html.replace(re1, ''); //执行替换成空字符
		return msg;
	}
	// 公用一个语音容器
	let innerAudioContext = null
	const readContent = (contentx) => {
		var plugin = requirePlugin("WechatSI")
		let manager = plugin.getRecordRecognitionManager()

		console.log(contentx, getSimpleText(contentx))

		if (unReading.value == true) {
			plugin.textToSpeech({
				lang: "zh_CN",
				tts: true,
				// content: "一个常见的需求",
				content: getSimpleText(contentx),
				success: function(res) {
					console.log("succ tts", res.filename)
					audioWx.value = res.filename
					innerAudioContext = uni.createInnerAudioContext();
					innerAudioContext.autoplay = true;
					innerAudioContext.src = audioWx.value;
					innerAudioContext.onPlay(() => {
						console.log('开始播放');
						unReading.value = false;
					});
					innerAudioContext.onError((res) => {
						console.log(res.errMsg);
						console.log(res.errCode);
					});
				},
				fail: function(res) {
					console.log("fail tts", res)
				}
			})
		} else {
			innerAudioContext.pause()
			console.log('暂停播放')
			unReading.value = true

		}
	}




	//	.paragraph 无法正常渲染出来样式
	const formatContent = (content) => {
		return content.replace(/<p>/g, '<p class="paragraph">\xa0\xa0\xa0\xa0\xa0\xa0');
	}


	onShow(() => {
		console.log(useClan.clanItr, "ssssssssss")
		clan.getClanItr(useClan.clanId).then(res => {
			console.log(res.data)
			useClan.clanItr = res.data
		})
		console.log("11111111111111111")
		clanMsg.value = useClan.clanMsg
		console.log(clanMsg.value, "Msg----")
		itrList.value = useClan.clanItr
		// itrList.value = useClan.clanItr;
		console.log(itrList.value, "xxxxxxxxxxxxxxxx", useClan.clanItr)

	});
	import {
		useUserStore
	} from '@/store/index.js'
	import {
		getUserInf
	} from '@/apis/login.js'
	const useUser = useUserStore()
	const bindClan = () => {
		console.log(useUser.userProfile.account)
		clan.bindFamily({
			wxOpenId: useUser.userProfile.account,
			treeId: useClan.clanId
		}).then(res => {

			console.log(res.data)
			if (res.msg == "ok") {
				console.log("绑定成功")
				useUser.userProfile.treeId = useClan.clanId
			}
		})
	}
	const cancelBindClan = () => {
		console.log(useUser.userProfile.account)
		clan.bindFamily({
			wxOpenId: useUser.userProfile.account,
			treeId: null
		}).then(res => {
			console.log(res.data)
			if (res.msg == "ok") {
				console.log("解除绑定成功")
				useUser.userProfile.treeId = null
			}
		})
	}
</script>

<style lang="scss" scoped>
	//.paragraph 无法正常渲染出来样式
	.paragraph {
		margin-top: 20rpx;
		color: white;
	}

	.mesInf {
		width: 90vw;
		margin: 0 auto;
		color: darkred;
		display: flex;
		flex-direction: column;
		align-items: center;

		.itMap {
			border-bottom: 2rpx darkred solid;
			margin-top: 20rpx;
			width: 100%;

			.clMap {
				margin-left: 40rpx;
				padding-bottom: 20rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				gap: 20rpx;
			}

			.clanMsgTxt {
				font-size: 70rpx;
				font-weight: 600;
			}
		}



		.itItr {
			margin-top: 60rpx;
			width: 100%;
			border-bottom: 6rpx darkred solid;
			padding-bottom: 40rpx;
			position: relative;


		}


		// 公用title
		.titleItr {
			text-align: center;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			font-size: 40rpx;
			font-weight: 700;
			position: relative;

			.btnReadContent {
				height: 40rpx;
				width: 40rpx;
				font-size: 30rpx;
				position: absolute;
				top: -20rpx;
				right: 50rpx;
			}
		}

		.contentItr {
			display: block;
		}

		.itInf {}
	}

	.btnBind {
		margin-top: 30rpx;
		padding: 10rpx;
		border-radius: 12rpx;
		border: none;
		padding: 9rpx;
		background-color: darkred;
		color: white;
		font-weight: 500;
		font-size: 40rpx;
		display: flex;
		align-items: center;
	}
</style>